<template>
    <el-row class="container" type="flex" justify="space-between">
        <el-row class="left">
            <TourismrRecommend/>
        </el-row>
        <el-row class="right">
            <el-row class="search-container">
                <el-row class="search-box">
                    <input type="text" placeholder="请输入想去的地方，比如：'广州'" v-model="keyword">
                    <i class="el-icon-search" @click="search"></i>
                </el-row>
                <el-row class="recommend">
                    推荐：
                    <span v-for="(item,index) in recommendWords" :key="index" @click="searchRecommend(index)">{{item}}</span>
                </el-row>
            </el-row>
            <el-row class="recommend-strstegy">
                <el-row class="title" type="flex" justify="space-between">
                    <span>推荐攻略</span>
                    <el-button type="primary" icon="el-icon-edit"
                    @click="$router.push('/tourismStrategy/editStrategy')"
                    >&nbsp;写游记</el-button>
                </el-row>
                <StrategyItem :strategyData="item" v-for="(item,index) in strategyList" :key="index" />
            </el-row>
            <!-- 分页 -->
            <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="start"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-row>
    </el-row>
</template>

<script>
import TourismrRecommend from '@/components/tourismStrategy/TourismrRecommend'
import StrategyItem from '@/components/tourismStrategy/StrategyItem'
export default {
    data(){
        return{
            keyword:null,
            start:1,
            limit:2,
            total:0,
            recommendWords:['广州','上海','北京'],
            strategyList:[]
        }
    },
    components:{
        TourismrRecommend,
        StrategyItem
    },
    methods:{
        loadStrategyList(){
            // 修改router
            this.$router.push('/tourismStrategy?start='+((this.start-1)*this.limit)+'&limit='+this.limit);
            this.$axios({
                url:'/posts',
                method:'get',
                params:{
                    city:this.keyword ? this.keyword : null,
                    _start:(this.start-1)*this.limit,
                    _limit:this.limit
                }
            }).then(res => {
                this.strategyList = res.data.data;
                this.total = res.data.total;
            })
        },
        handleSizeChange(val){
            this.limit = val;
            this.loadStrategyList();
        },
        handleCurrentChange(val){
            this.start = val;
            this.loadStrategyList();
        },
        search(){
            this.loadStrategyList();
        },
        searchRecommend(index){
            this.keyword = this.recommendWords[index];
            this.loadStrategyList();
        }
    },
    mounted(){
        this.loadStrategyList();
    }
}
</script>

<style lang="less" scoped>
.container{
    width: 1000px;
    margin: 20px auto;
    .left{
        width:260px;
    }
    .right{
        width: 701px;
    }
}
.search-container{
    width:100%;
    .search-box{
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
        height: 41px;
        box-sizing: border-box;
        border:3px solid #FFA000;
        input{
            flex:95%;
            width:100%;
            height:100%;
            text-indent: 20px;
            padding-right: 10px;
            font-size: 12px;
            color: #757575;
            &::placeholder{
                color: #757575;
            }
        }
        i{
            flex:5%;
            font-size: 22px;
            color: #FFA000;
            font-weight: 700;

        }
    }
    .recommend{
        padding:10px 0;
        font-size: 12px;
        color: #757575;
        span{
            &:hover{
                color: #FFA000;
                text-decoration: underline; 
                cursor: pointer;
            }
            &:nth-child(2n){
                margin:0 10px;
            }
        }
    }
}
.recommend-strstegy{
    .title{
        height: 50px;
        border-bottom: 1px solid #EEEEEE;
        span{
          line-height: 40px;
          font-size: 18px;
          color: #FFA000;
          border-bottom: 2px solid #FFA000;
        }
        .el-button{
            height:40px;
        }
    }

}
.el-pagination{
    margin-top: 20px;
}

</style>